<style lang='scss'>
	.login-iframe {
		display: flex;
		align-items: center;
		justify-content: center;
		.login-form {
			min-width: 360px;
			background-color: #fff;
			border-radius: 5px;
			padding: 50px;
			.label {
				color: #9da3a8;
				padding-bottom: 13px;
				&:not(:first-child) {
					margin-top: 28px;
				}
			}
			.login-btn {
				margin-top: 30px;
				width: 100%;
			}
		}
	}
</style>
<template>
	<div class="login-iframe">
		<div class="login-form">
			<div class="label">邮箱</div>
	    <cusInput name='email' :v_input.sync="email" :v_input_error.sync="email_error" @errorCheck="checkEmail"></cusInput>
	    <div class="label">密码</div>
	    <cusInput type="password" name='passwd' :v_input.sync="passwd" :v_input_error.sync="passwd_error" @errorCheck="checkPasswd"></cusInput>
	    <el-button :loading="btn_loading" class="login-btn" type='primary' @click="login">登录</el-button>
		</div>
	</div>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	import { verifyPasswd, verifyMailbox } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				email: null,
				email_error: null,
				passwd: null,
				passwd_error: null,
				btn_loading: false
			}
		},
		methods: {
			checkEmail() {
				var t_email = this.email;
				this.email_error = '';
				this.email_error = verifyMailbox(t_email);
			},
			checkPasswd: function() {
				var t_password = this.passwd;
				this.passwd_error = '';
				this.passwd_error = verifyPasswd(t_password);
			},
			login() {
				this.btn_loading = true;
				this.$axios.post('/admin/login', {
					email: this.email,
					passwd: this.passwd
				}).then(res => {
					if(res.s == 1) {
						this.$message.success('登录成功，正在跳转');
						this.$router.push({name:'scan_record', params:{type:'login'}})
					}
				}).finally(() => {
					this.btn_loading = false;
				})
			}
		},
		components: {
			cusInput
		}
	}
</script>